graphql-playground-middleware-express

What is graphql-playground-middleware-express?

The graphql-playground-middleware-express package provides middleware for integrating GraphQL Playground, an in-browser IDE for exploring GraphQL APIs, with Express.js applications. It allows developers to easily set up a user-friendly interface for testing and interacting with their GraphQL endpoints.

What are graphql-playground-middleware-express's main functionalities?

Setting up GraphQL Playground

This feature allows you to set up GraphQL Playground at a specific endpoint in your Express application. In this example, the playground is accessible at '/playground' and it points to the GraphQL endpoint '/graphql'.

const express = require('express');
const { express: playground } = require('graphql-playground-middleware-express');

const app = express();

app.get('/playground', playground({ endpoint: '/graphql' }));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Customizing GraphQL Playground

This feature allows you to customize the settings of GraphQL Playground. In this example, the editor theme is set to 'dark' and the cursor shape is set to 'line'.

const express = require('express');
const { express: playground } = require('graphql-playground-middleware-express');

const app = express();

app.get('/playground', playground({
  endpoint: '/graphql',
  settings: {
    'editor.theme': 'dark',
    'editor.cursorShape': 'line'
  }
}));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Other packages similar to graphql-playground-middleware-express

graphql-playground

The graphql-playground package provides a standalone version of GraphQL Playground that can be used with various GraphQL servers. It offers similar functionalities but is not tied to any specific server framework.

graphiql

GraphiQL is another in-browser IDE for exploring GraphQL APIs. It is highly customizable and can be integrated with various server frameworks. Compared to graphql-playground-middleware-express, GraphiQL offers a different user interface and customization options.

apollo-server-express

Apollo Server Express is a GraphQL server that can be integrated with Express.js. It includes a built-in GraphQL Playground for testing and interacting with GraphQL APIs. It provides a more comprehensive solution for setting up a GraphQL server with additional features like schema stitching and data sources.

README

graphql-playground-middleware-express

Express middleware to expose an endpoint for the GraphQL Playground IDE SECURITY NOTE: All versions of graphql-playground-express until 1.7.16 or later have a security vulnerability when unsanitized user input is used while invoking expressPlayground(). Read more below

Installation

Using yarn:

yarn add graphql-playground-middleware-express

Or npm:

npm install graphql-playground-middleware-express --save

Usage

See full example in examples/basic.

const express = require('express')
const expressPlayground = require('graphql-playground-middleware-express')
  .default

const app = express()

app.get('/playground', expressPlayground({ endpoint: '/graphql' }))

Security Notes

All versions before 1.7.16 were vulnerable to user-defined input to expressPlayground(). Read more in the security notes

Security Upgrade Steps

To fix the issue, you can upgrade to 1.6.12 or later. If you aren't able to upgrade, see the security notes for a workaround.

yarn: yarn add graphql-playground-express@^1.7.16

npm: npm install --save graphql-playground-express@^1.7.16